Breakpoint basics and responsive design in Webflow - web design tutorial
HTML-код
- Опубликовано: 14 июн 2024
- In this lesson, you'll learn:
1. Styling your site across different breakpoints
2. Add larger breakpoints
3. Scale the canvas
4. Override styles across different breakpoints
5. Clear overriding styles
6. Test responsiveness and fluidity
Read on the blog: webflow.com/blog/3-new-larger...
Steps in the video:
00:00 - Introduction
00:43 - Style across breakpoints
05:38 - Add breakpoints
08:04 - Scale the canvas
11:39 - Override styles
12:44 - Clear styles
14:33 - Test responsiveness and fluidity
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow
This man is the reason I use Webflow!
U are geh
Me too - he's so good.
Came here to say the same
I’ll add that I’d watch if I didn’t use Webflow
lmaoo so true
This narrator is the freakin GOAT
The quality of these video tutorials is insane. Kudos to all the Webflow team. I'm sure there is a lot of work beyond this presenter.
Saw a comment saying, “Add bigger breakpoints.” Now they’re here. Really awesome how they listen to the community
Your educational content is as close to perfect as it gets.
facts!
Hilarious and incredibly helpful as always!!! To me, THIS is the Webflow brand in a nutshell. So well done!
How can someone be so smart and have such a good sense of humor at the same time this is rare guys
Yes, finally! Thank you for adding this, been waiting for years - cheers guys! No more flimsy attempts at creating a layout that works for both 1024px and 2560px 😂
"-and then we faded to black, just a bit too early." Got me.
I love Webflow as product and a tool, but also for their excellent and clear (and funny!) tutorials.
Yes!!!! I’ve hoped for this for so long. Thanks for continuous features and updates to the product. And thank you for injecting so much life & quality writing into these videos!
I like the people behind these videos.. they are never boring...
"Succulents. Are they still cool? I need to know." - now that's a site I can get behind
Excellent. Excellent. And actually, this clears the way to selecting which breakpoint has the star on a per project basis, allowing for a mobile first design. This makes me happy!
Please, Flowgods, hear this prayer.
I am loving the tutorials! Love the learning process, the Narrator has made the learning curve As smooth as possible
The best instructor on the planet!
I love these Tutorials! Very educational and hilarious at the same time! 😂👍
This is incredible. I love your style of explaining things.
Thank you Webflow. You've saved me tons of custom code editing
Amazing implementation (as always) of an essential feature. I love you 3,000 Webflow
OMG! Finally. Thank you Webflow :)
I was just this morning cursing Webflows lack of widescreen breakpoints. Thank you guys!!!!
Me too looked up custom code for that this Morning 😂
@@lukeschneider8258 As was I, then a RUclips video notification poped up!
Great stuff! You guys are doing things right!! Lots of content surrounding the product is great!!
This was so helpful! I had it sort of backwards. Love this guy btw!
This is such a joy to watch! And highly useful as well! Thanks man :D
this guy is hilarious and these are the best web dev videos I've ever seen.
He teaches perfectly!
Excellent video. Thank you.
This video is great even if you don't use Webflow and just want to understands responsive design. Awesome humour, full of useful information. Please make a tutorial about how to make tutorials once! :)
"Wanna see what it looks like on a 27" iMac?..........." - Hilarious
"that was the actual 27" imac...." - Amazing.
I actually died at this moment lmfao
Best tutorials ever.
great !!!!love his voice.
HOLY OKAY I'M USING THIS
I love this guy badly
Fluidity - Click & Drag to change between breakpoints is the best.
Perfectly explained video as usual. I am really considering to start using Webflow. What I have noticed throughout all the videos on the channel is that there is none on search bar and how to, for example, filter things (e.g. movies) through the search bar. I would appreciate, and probably Webflow community, if you could do one in depth video on that?
Hell yeah, finally!
Awesome video that 4K 60fps is smooth af!
Just wait until we get to 12K at 480 fps in 3D!
@@Webflow can't wait
Awesome!!!
Awesome! Now please bring multi-language sites/CMS.
Finally! Yesss
Higher breakpoints!! 😝🔥👌👍😎🍻🥂🍾
Wow, I haven't tested WebFlow yet in my development environment but man this is super exciting editing and the video tutorials are amazing. Great job WebFlow. Is there an easy way to drag the column widths side to side and reverse the column order? That is pretty important to know.
So is it possible to change the actual layout of the page based on the different breakpoints,
because once you move something through the navigation it moves on all screen sizes.
For example if I wanted to have the side bar at the side but then want it at the top would I be able to do without CSS grid and and manually manipulate it for different breakpoints.
Hallelujah !!! Been waiting for this for 2 years. Thank you guys! - Why am I so excited about this?
QUESTION: When adding one of the new highger breakpoints it says "You cannot remove the breakpoint from the project once it's created" - Why would someone ever want to remove the breakpoint? Are there any downsides to having the breakpoints there?
I don't there there are any downsides to having larger breakpoints in a project. I think this is more of a backend issue for Webflow, I'm sure it's hard to delete an entire breakpoint from a project once it's created.
Technically adding breakpoints is adding more CSS, which can slow down your site in extreme cases. However, I wouldn't worry about that too much.
Thanks guys!
His got something, don't know what... but i fell in love
I always find myself back in webflow haha
nice. I've hated doing my work on my ultra-wide and on my laptop.
He is legend
Thanks for the entertaining and educational content you always produce. I have a quick question - what if I want to change the image from desktop to mobile? I can't seem to figure out how to do that. I can hide an image, but I cannot replace an image. Any help would be appreciated.
You come for the tool, stay for the teacher.
Hello,
Thank you for your video.
Because I've started webflow.
But I have difficult with webflow breakpoint.
I have to change the base breakpoint in webflow, but I cannot find an answer in anywhere.
I'd like to change the base breakpoint from 1270 to 1440.
What should i have to do.
Thank you for your help.
how come the default desktop breakpoint is different for you and me? does webflow automatically decide that based on the working display? I guess yes it is, but doesn't this affect the consistency in design workflow?
Do interactions cascade up and down as well as the rest??
Thanks a ton
Have you guys thought of adding display height as well as width? so that we can get a more realistic sense of what things will looks like a particular aspect ratios? its something ive always thought would be useful as regardless of this update I still have to check things on my phone if im using such things as 100VH in my styles.
This would be a major come up being able to see the height of the device. Even if it was as simple as a line going accrross the layout.
@@dustinkoop I agree, my thought was to just have everything below be covered by a semi transparent overlay or something. Id be happy with either tbh.
@@MrLinknel ya, Similar to what Flinto does
"But we made it work for tablet, mobile landscape, mobile portrait, and NES"!!!!!! That was perfect! LOL
Then you're in for a treat when you go to the mobile portrait breakpoint in Webflow and actually drag to resize the canvas to 256 px... 😏
This is great but I really hope they add a small laptop/landscape tablet break point. I find this area of screensize to be bigger issue than mega screen sizes. I have many clients that open their site up in a small browser window or small laptop and see issues and I can't adjust unless I use custom breakpoints.
Can I change an image or hide an object at a breakpoint without affecting other breakpoints?
Did you find the solution?
Yes you can. Just click the “hide” symbol button (eye open/closed icon) in the layout section of the panels on the right
Looking for a way to scale text dynamically (ems/rems?) with canvas resizing...
How do you make changes on Desktop view only?
As I was working on a website, somehow the changes I made on Tablet view changed my desktop too. I dont want to changed the desktop view only to have it cascade all the way down again and then make changes to tablet and downwards,
When I remove a column for mobile view as shown at 4:36, it just auto generates a column anyway and it doesn't change what it looks like. This is only for one grid I have, for another it works perfectly. Any fix?
Can anyone help
I used a long headline in the hero section like "Hi I'm Mayank". It looks fine in the laptop view but as I switched to tablet view it shows "Hi I'm" in one line and "Mayank" in the second line. Now If I put together "I'm Mayank" in the second line in tablet view, it is also changing in laptop view. What am I missing here?
My design looks good going down to every smaller device, but in a window on my computer if I make the window smaller it looks really bad... any tips on how to fix this??
When will we EVER get to customize our breakpoints?
1:00 on a project i am currently working on, the styles and layouts do not pass down to any smaller device, at all! It's frustrating me so much, considering the amount of work i need to put in it to make it look good across all devices......though the classes still appear, none of the properties of those classes are retained, so i have to manually recreate them, every single time, at every single breakpoint, from scratch......why?
Would be awesome if we could display different content for different sized devices rather than only be able to make changes to style and sizing.
actually I was surprised that they don't mention it in the video, but the trick is to use the display parameter. You just copy-past your element so that you have it twice, lets call em A and B, and you make the changes you want on B(this will be the "different content" you're looking for). If you want element A on a certain screen size, then dont touch anything and let its display parameter be on block(or inblock) and put the display paramater of element B on non-visible. and vice-versa beyond breakpoints in which you want content B but not content A
Hi Webflow, I encountered a bug and I posted it in your forum, titled "Any project I have does not fold to tablet view". In your video at 0:58 when I click on the tablet breakpoint, it doesn't change to 768px, instead it changes to 985px -> which is almost the same as the Desktop. I have no clue why, I tried finding a delete button on the breakpoint or settings, but I cannot find any. I am stuck, can you please help me. This bug is really annoying because I can't preview in tablet quickly. Thanks.
Hello webflow,
Everytime i tried to preview on larger screen the whole page blurs
When i go to back designing mode it becomes clear again
Please... When is the offline version coming?
In min 0:43 you talk about sizing and spacing and that fixing something on smaller views, will automatically generate a class. I don't see that class when fixing something on a smaller view. Base breakpoint already passed down a class and a combo class. Issue: my typo on base breakpoint looks fine, but it needs to be adjusted on smaller views. Do I need to create another class on smaller breakpoint, or is styling typography on smaller breakpoint enough?
No. You do not need to create a new class when styling for other breakpoints. Just go to that breakpoint that you want to make a style change on, click on the element you want to make a style change on, then apply your style change.
Hope this helps :)
Finally.
But how can I fixate the size of mobile version for instance on IPhone size view?
yes this works on texts. how about images?
for overriding styles, can we make paragraphs be different on different break points
Hi Areeb! Yes, you can apply different styles at each break point. Please note that styles cascade down. So if you want a style to apply to all break points, start at the "all breakpoints" setting. Then move down to Tablet to create new styles which won't affect the desktop breakpoint.
Ya got me with NES 😂
I have experienced a common type of situation in which I have two columns, text on the left side and an image on the right side. Switching to the mobile breakpoint it drops the right column down. But I really would like to have the image on top. So I duplicate that column and disable it on desktop and only enable it on mobile. I change the order of the columns and then my image appears on top. My question: Is there a more efficient way to create a responsive column that drops the column you want to drop?
On the column settings you can easily change it from multiple columns to one column on smaller displays, but not the order of the columns. I think it would be a nice feature to have it there.
Instead of using columns, consider using flexbox or css grid. More information can be found here:
university.webflow.com/lesson/intro-to-flexbox
university.webflow.com/lesson/grid-2-0
why is preview size is not the same when you publish it?
What I i see in the designer mode is completely different from what I see on my devices. I mean it looks clean in designer mode but messy irl.
Finally
4:33 my current case
Why can't I have custom breakpoints!? Why do you limit us?
Hi , please what if we did a lot of changes on tablet and we want to apply them on a laptop ? how can we did this without remake all the changes one by one
Hi, SQUAREVISION! Changes made on Tablet only affect Mobile landscape and Mobile portrait, as it's designed to prevent changes on smaller Tablet screens from overriding things on the Base breakpoint (Desktop). We're hoping to make this more versatile in the future, but for now, unfortunately, this means you'll have to reapply the changes you made on Tablet to the Desktop breakpoint. 😞
Somehow, whenever I remove a grid column or row, they remains visible (greyed out when editing and visible when viewing the page), unlike in this vid where they immediately disappear. Anybody any thoughts on this?
You may have some grid child elements spanning across more columns than you have specified in the grid settings. Once you find the elements that are spanning too many columns, try having them span less columns. This should fix the issue.
Hope this helps 😁
Breakpoints in webflow are the best shit what happend in this pandemic times.
It seems really annoying to manage COMBO classes across different breakpoints, and I can't find any tutorials from WF that address this type of styling method
me watching this about breakpoints and being on a 21:9 ultrawide monitor LOL
How to add a smaller breakpoint for older mobiles?
You can either add it using custom CSS code or use % or VW based units in your styles.
Can I scream? Forget about asking I will scream YEAAAAA
NES :)
please add NES breakpoint, thnx 👍🏽 also LET ME CHANGE THE BASE/ PRIMARY BREAKPOINT PLZ
The NES device width fits nicely within the Mobile portrait breakpoint, and is there in the Designer today! 100% with you on more control over breakpoints - this is something the team is building towards in the future, so stay tuned! 🚀
We covered a lot. Because it's a lot to cover 🤷♂
Do you think he just happens to read books that are only white and grey in colour? Because that's what it seems like
Need 991ps break point
I don't think style changes cascade both up and down. Style changes only cascade down. If you add a breakpoint, it inherits every style above it. Also, breakpoints is a bad name because breakpoints have different meaning.
"Succulents, are they still cool?" I need to know....
Anyone find the NES Break Point Easter Egg LOL...
😀
That's called adaptive layout, not responsive layout
For NES? LMAO
So am I right in saying that the default 'Container' you can drop in can now have its width changed?
Yes! You can now change the default maximum width (Max W) on each breakpoint for the default container element. 👍
Webflow I want to bear your children